import Vue from 'vue'
import Vuex from 'vuex'
import router from "@/router";
import axios from "@/axios";
Vue.use(Vuex)

export default {
    state: {
        // 菜单栏数据
        menuList:  [],
        // 权限数据
        permList:  [],
        editableTabsValue: 'Index',
        editableTabs: [{
            title: '首页',
            name: 'Index',
        }]
    },
    mutations: {
        /**
         * 获取菜单和权限，优先从缓存读取，之后把菜单添加到路由
         * @param state
         * @param router
         */
        setPermission(state, router) {
            if (!localStorage.getItem("token")) {
                return;
            }
            if (!localStorage.getItem("menuList") || !localStorage.getItem("permList")) {
                axios.get("/sys/menu/nav")
                    .then(res => {
                        if (res.data.data === null) {
                            return;
                        }
                        console.log(res)
                        // 拿到menuList并存入缓存
                        state.menuList = res.data.data.nav;  // 拿到用户权限
                        state.permList = res.data.data.authoritys;
                        localStorage.setItem("menuList", JSON.stringify(state.menuList));
                        localStorage.setItem("permList", JSON.stringify(state.permList));
                        addMenuToRoute(state.menuList, router)
                    })
            } else {
                state.menuList = JSON.parse(localStorage.getItem("menuList"));
                state.permList = JSON.parse(localStorage.getItem("permList"));
                addMenuToRoute(state.menuList, router)
            }
        },
        /**
         * 退出登录时清空菜单和权限
         * @param state
         */
        resetState: (state) => {
            state.menuList = []
            state.permList = []
            localStorage.removeItem("menuList")
            localStorage.removeItem("permList")
        },
        /**
         * 添加标签
         * @param state
         * @param tab
         */
        addTab(state, tab) {
            let index = state.editableTabs.findIndex(e => e.name === tab.name)

            if (index === -1) {
                state.editableTabs.push({
                    title: tab.title,
                    name: tab.name,
                });
            }

            state.editableTabsValue = tab.name;
        },
    }
}
const addMenuToRoute = (menus, router) => {
    // 动态绑定路由
    menus.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(e => {
                // 转成路由
                let route = menuToRoute(e)
                // 把该路由作为Home的子路由添加到路由中
                router.addRoute('Home', route)
            })
        }
    })
}
const menuToRoute = (menu) => {
    if (!menu.component) {
        return null
    }

    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        }
    }

    route.component = () => import('@/views/' + menu.component.toLowerCase() + "/Index.vue")
    return route
}